<template>
  <div class="flow-path">
    <div class="title">服务流程</div>
    <div class="content">
      <div class="icon-box" v-for="item in list" :key="item.num">
        <img class="main-icon" :src="item.icon" alt="" />
        <div class="desc">
          <span class="num" :style="'color: ' + item.numColor">
            {{ item.num }}
          </span>
          <span class="name-ch">
            {{ item.ch }}
          </span>
          <span class="name-en">
            {{ item.en }}
          </span>
        </div>
        <div v-if="item.arrowIcon" class="arrow-box" id="arrow-box-id">
          <img :class="'arrow-icon' + ' ' + 'arrow-icon' + '-' + item.num" :src="item.arrowIcon" alt="" />
          <div :class="'arrow-line' + ' ' + 'arrow-line' + '-' + item.num"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import one from '@/assets/images/service/steps/1.png'
import two from '@/assets/images/service/steps/2.png'
import three from '@/assets/images/service/steps/3.png'
import four from '@/assets/images/service/steps/4.png'
import five from '@/assets/images/service/steps/5.png'
import six from '@/assets/images/service/steps/6.png'
import seven from '@/assets/images/service/steps/7.png'
import eight from '@/assets/images/service/steps/8.png'
import nine from '@/assets/images/service/steps/9.png'
import yellowArrow from '@/assets/images/service/arrow/yellow-arrow.png'
import blueArrow from '@/assets/images/service/arrow/blue-arrow.png'
import pinkArrow from '@/assets/images/service/arrow/pink-arrow.png'
import greenArrow from '@/assets/images/service/arrow/green-arrow.png'
import skyBlueArrow from '@/assets/images/service/arrow/skyblue-arrow.png'
import { ref } from 'vue'
const list = ref([
  {
    icon: one,
    num: '01',
    numColor: '#fecc10',
    ch: '企业调研',
    en: 'Enterprise research',
    arrowIcon: yellowArrow
  },
  {
    icon: two,
    num: '02',
    numColor: '#CBDCFD',
    ch: '需求整理',
    en: 'Requirement organization',
    arrowIcon: blueArrow
  },
  {
    icon: three,
    num: '03',
    numColor: '#FDCBE4',
    ch: '咨询报告交付',
    en: 'Consultation report delivery',
    arrowIcon: pinkArrow
  },
  {
    icon: four,
    num: '04',
    numColor: '#CBFFCC',
    ch: '合同签订',
    en: 'Contract signing',
    arrowIcon: greenArrow
  },
  {
    icon: five,
    num: '05',
    numColor: '#CBE9FF',
    ch: '项目启动',
    en: 'Project Launch',
    arrowIcon: skyBlueArrow
  },
  {
    icon: six,
    num: '06',
    numColor: '#E7CBFF',
    ch: '原型/设计',
    en: 'Prototype/Design',
    arrowIcon: blueArrow
  },
  {
    icon: seven,
    num: '07',
    numColor: '#FFCCDF',
    ch: '项目开发',
    en: 'Project Development',
    arrowIcon: pinkArrow
  },
  {
    icon: eight,
    num: '08',
    numColor: '#CBE9FF',
    ch: '测试上线',
    en: 'Test launch',
    arrowIcon: skyBlueArrow
  },
  {
    icon: nine,
    num: '09',
    numColor: '#FFF1CD',
    ch: '项目文档交付',
    en: 'Project Document Delivery',
    arrowIcon: ''
  }
])
</script>

<style scoped lang="scss">
.flow-path .title {
  font-size: 30px;
  font-weight: 400;
  text-align: center;
  color: #000000;
  margin: 40px 0 40px 0;
}

.flow-path .content {
  display: flex;
  justify-content: center;
}

.flow-path .content .icon-box {
  margin-right: 14px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  flex: 1;
}

.flow-path .content .icon-box img {
  width: 98px;
  height: 98px;
  border-radius: 50%;
}

.flow-path .content .icon-box img:nth-child(2) {
  margin-top: 30px;
}

.flow-path .content .icon-box .desc {
  display: flex;
  flex-direction: column;
  position: relative;
}

.flow-path .content .icon-box .desc .num {
  opacity: 0.58;
  font-size: 63px;
  font-weight: 400;
  text-align: center;
}

.flow-path .content .icon-box .desc .name-ch {
  font-size: 16px;
  font-weight: 400;
  text-align: center;
  color: #000000;
  position: absolute;
  top: 54px;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0.8;
  text-align: center;
  width: 200px;
}

.flow-path .content .icon-box .desc .name-en {
  opacity: 0.8;
  transform: translateY(-14px);
  font-size: 14px;
}

.flow-path .content .icon-box .arrow-box {
  position: absolute;
  top: 38px;
  left: 86px;
  width: 100%;
  display: flex;
  justify-content: center;
}

.flow-path .content .icon-box .arrow-box .arrow-icon {
  width: 21px;
  height: 27px;
  z-index: 10;
  position: relative;
}

.flow-path .content .icon-box .arrow-box .arrow-line {
  border-top: 2px dashed #e2e2e2;
  width: 70px;
  position: absolute;
  top: 12px;
}

@media screen and (max-width: 780px) {
  .content {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 40px 20px !important;
    padding: 10px;
  }
  .content .icon-box {
    margin-right: 0 !important;
  }
  .content .icon-box .name-ch {
    width: auto !important;
    white-space: nowrap;
  }
  .content .icon-box .main-icon {
    width: 80px !important;
    height: 80px !important;
  }
  .content .icon-box .desc .num {
    font-size: 40px !important;
  }
  .content .icon-box .desc .name-ch {
    font-size: 12px !important;
    top: 31px !important;
  }
  .content .icon-box .desc .name-en {
    transform: translateY(-5px);
  }
  .content .icon-box .arrow-box {
    position: absolute;
    top: 27px !important;
    left: 50% !important;
    width: 100%;
  }
  .content .icon-box .arrow-box .arrow-icon-03,
  .content .icon-box .arrow-box .arrow-icon-06 {
    display: none;
  }
  .content .icon-box .arrow-box .arrow-line {
    width: 40% !important;
  }
  .content .icon-box .arrow-box .arrow-line-03,
  .content .icon-box .arrow-box .arrow-line-06 {
    display: none !important;
  }
}

@media screen and (max-width: 750px) {
  #arrow-box-id {
    left: 59% !important;
  }
}
</style>
